<template>
	<div class="index-main">	
		<section class="section-item">	
			<dy-money :opt="moneyData"></dy-money>
		</section>
		<section class="section-item">
			<div class="title">{{nowTitle.name}}</div>	
			<div class="item-block">
				<div class="block-tag cc">
					<div :class="[{'on': trendPost.period == 1}, 'tag']" @click="chooseTag(1)">近30天</div>
					<div :class="[{'on': trendPost.period == 2}, 'tag']" @click="chooseTag(2)">近12月</div>
				</div>
				<chart class="line-charts" :options="line1" theme="roma"></chart>	
			</div>	
		</section>
	</div>
</template>
<script>
import dicts from '@/utils/dicts'
import {merge} from '@/utils/index'
export default {
	name: 'allIndex',
    data () {	 
		return {	
			line1: {},
			trendPost: {			
				period: 1,				
			},
			trendData: {},
			moneyData: {
				row: 2,
				layoutType: 'horizontal',
				api: 'pandectMajor',
				dict: dicts.dictAll,
				dateList: dicts.dictDate	
			},	
			tagIndex : 1,    	
		}
	},
	computed : {
		nowTitle () {
			return this.$store.getters.nowTitle
		},		
		orgId () {
	 		return this.$store.getters.orgId;
		}
	},
	watch: {
		nowTitle () {
			this.updata();
		},
		orgId ()  {
			this.updata();
		},	
	}, 	
	mounted () {	
		// 初始化period 、 nowTitle
		this.$store.commit("period", {name: '', val: 1})  		
		this.$store.commit('nowTitle', {quotaType:dicts.dictAll[Object.keys(dicts.dictAll)[0]].quotaType, name:dicts.dictAll[Object.keys(dicts.dictAll)[0]].name[0]}) 
	},
    methods: {
    	// 更新数据
    	updata () {    		
    		this.getTrendData();
    	},    	
    	// 趋势报表
    	getTrendData () {
    		if(!this.orgId || !this.nowTitle.quotaType) return 		
    		this.trendPost = {
    			orgId: this.orgId,
    			period : this.tagIndex,
    			quotaType: this.nowTitle.quotaType
    		}

    		api.pandectTrend(this.trendPost).then(data => {    
				let line1 = {	
    				legend: {data:[]},		
					xAxis :  [{data : data.reportDetail[0].xValueList}],
					series: []
				}

				// 有百分率的情况
				if(data.reportDetail[0].yValueList[0].match("%")) {
					line1.yAxis =[
						{
							axisLabel: {
								formatter: function (value, index) {
								    return numFormat(value, "0", true) + '%'
								}
							}
						}
					]
				}

				data.reportDetail.map((res, index) => {
					let _data = ''
					// 有百分率的情况
					if(res.yValueList[0].match('%')) {
						_data = []
						res.yValueList.map((r, i) => {
							_data.push(r.replace('%', ''))
						}) 
					} 

					line1.series.push({type: 'line', data: _data || res.yValueList, name: res.quotaTypeName}) 
					line1.legend.data.push(res.quotaTypeName) 
				})	
    			this.line1 = merge(this.line, line1)
			}) 
    	},

    	// 日趋势和月趋势
    	chooseTag (tag) {
    		this.tagIndex = tag;
    		this.getTrendData();    		
    	}
    }
}
</script>
<style lang="less" scope>
@import '../../assets/less/base.less';	
.index-main {
	.echarts {
		&.line-charts {
			padding-bottom: 1rem;
			height: 400px;
		}
	}
}
</style>